開始寫useWindowSize的測試吧
這篇應該比較簡單,應該大概可以自己寫出來了吧
我認為困難的點可能是如何模擬窗口
下面開始講解是怎麼模擬的
let resizeWindow = (x: number, y: number) => { ... };: 這是一個箭頭函數,接受兩個參數,x 和 y,代表窗口的新寬度和高度。window.innerWidth = x;: 這行設定 window 物件的 innerWidth 屬性為 x。這會模擬改變瀏覽器窗口的寬度。window.innerHeight = y;: 這行設定 window 物件的 innerHeight 屬性為 y。這會模擬改變瀏覽器窗口的高度。window.dispatchEvent(new Event("resize"));: 這行會觸發一個名為 "resize" 的新事件。這會模擬用戶調整窗口大小時瀏覽器會觸發的 resize 事件,也就是我們在**useEffect 監聽的resize**事件。import { renderHook, act } from "@testing-library/react";
import { useWindowSize } from "../src"; // 
describe("useWindowSize", () => {
  // 用於模擬窗口大小的物件
  let resizeWindow = (x: number, y: number) => {
    window.innerWidth = x;
    window.innerHeight = y;
    window.dispatchEvent(new Event("resize"));
  };
	// 應該要回傳正確的窗口大小
  it("should return window size", () => {
    // 初始化窗口大小
    resizeWindow(800, 600);
    const { result } = renderHook(() => useWindowSize());
    expect(result.current.width).toBe(800);
    expect(result.current.height).toBe(600);
  });
	// 調整大小後應該要回傳正確的窗口大小
  it("should update size when window is resized", () => {
    // 初始化窗口大小
    resizeWindow(800, 600);
    const { result } = renderHook(() => useWindowSize());
    act(() => {
      // 改變窗口大小
      resizeWindow(1024, 768);
    });
    expect(result.current.width).toBe(1024);
    expect(result.current.height).toBe(768);
  });
});